<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人事管理系统后台管理系统</title>
    <link rel="stylesheet" href="./res/layui/css/layui.css">
    <style>
        *{
            border-radius: 0 !important;
        }

        .login-panel{
            padding:10px;
            background: #fff;
        }
        .nav-li{
            position:relative;
            display:inline-block;
            *display:inline;
            *zoom:1;
            margin-top:0;
            list-style:none;
            vertical-align:middle;
            line-height:60px;

        }
        .nav-li b{
            font-size: 20px;
        }
    </style>
</head>
<body class="layui-bg-gray">
    <!--导航条-->
    <ul class="layui-nav layui-bg-green">
        <li class="layui-nav-item">
            <a href="#" class="layui-logo">
                <img src="./res/images/44.png" width="80px" alt="">
            </a>
        </li>
        <li class="nav-li">
            <b>人力资源后台管理系统</b>
        </li>
    </ul>

    <!--登录/注册框-->
    <div class="layui-container login-box"
        style="width: 100%;
        height: 800px;
        background-image: url(./res/images/bg11.jpg);
        background-size: cover;">
        <div class="layui-row" style="padding-top: 10%;">
            <div class="layui-col-md4 layui-col-md-offset4 login-panel"
                 style="opacity: 0.8;background-color: rgba(255,255,255,0.5);border: 1px solid #626256">
                <div class="layui-tab layui-tab-brief">
                   <ul class="layui-tab-title">
                       <li class="layui-this">后台管理登录</li>
                   </ul>
                    <div class="layui-tab-content">
                        <!--登录tab-->
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form layui-form-pane" >
                                <div class="layui-form-item">
                                    <label  class="layui-form-label">
                                        <i class="layui-icon layui-icon-username"></i>
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" class="layui-input" placeholder="请输入账号" required lay-verify="required">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label  class="layui-form-label">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" class="layui-input" placeholder="请输入密码" required lay-verify="required" autocomplete="off">
                                    </div>
                                </div>
                                <div class="">
                                    <input type="checkbox"  name="save" class="layui-bg-blue" title="保存一周" lay-skin="primary">
                                    <a href="register.html" style="color: #0dc316;font-size: 14px;">没有账号,请注册!</a>
                                </div>
                                <div class="layui-form-item">
                                     <button class="layui-btn layui-btn-normal layui-btn-fluid layui-bg-green"  lay-submit lay-filter="formLogin">登录</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;margin-top: 10px;">&copy;毛氏集团</div>
    </div>
    <script src="./res/js/config.js"></script>
    <script src="./res/layui/layui.js"></script>
    <script>
        layui.use(function(){
            var ele = layui.element;
            var form = layui.form;
            var $ = layui.jquery;

            form.on('submit(formLogin)',function(data){
                var field = data.field; // 获取表单字段值
                console.log(field)
                // 此处可执行 Ajax 等操作 (请求后台接口)
                $.get("http://localhost:8989/admin/login",field,function(resp){
                    if(resp.success){
                        sessionStorage.setItem('user',JSON.stringify(resp.data))
                        location.href='main.html';
                    }else{
                        layer.alert(resp.msg,{icon:2})
                    }
                })
                return false; // 阻止默认 form 跳转
            })
        })
    </script>
</body>
</html>